<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家教订单地图</title>
    <script src="https://webapi.amap.com/maps?v=2.0&key=ac28ed8e884368fd4eaa5f8b6074ebca"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
        }
        
        #container {
            width: 100%;
            height: 100vh;
        }
        
        .info-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 350px;
            max-height: 80vh;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            overflow: hidden;
            z-index: 999;
            display: none;
        }
        
        .info-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            position: relative;
        }
        
        .info-header h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .info-header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            line-height: 30px;
            text-align: center;
        }
        
        .close-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .order-list {
            max-height: calc(80vh - 100px);
            overflow-y: auto;
            padding: 15px;
        }
        
        .order-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
            border-left: 4px solid #667eea;
            transition: transform 0.2s;
        }
        
        .order-card:hover {
            transform: translateX(5px);
        }
        
        .order-card h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .order-info {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }
        
        .order-info div {
            margin-bottom: 5px;
        }
        
        .tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: 5px;
            margin-top: 8px;
        }
        
        .tag-subject {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .tag-grade {
            background: #f3e5f5;
            color: #7b1fa2;
        }
        
        .tag-salary {
            background: #fff3e0;
            color: #e65100;
            font-weight: bold;
        }
        
        .filter-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 999;
        }
        
        .filter-panel h3 {
            font-size: 14px;
            margin-bottom: 10px;
            color: #333;
        }
        
        .filter-group {
            margin-bottom: 10px;
        }
        
        .filter-group label {
            font-size: 13px;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }
        
        .filter-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 13px;
        }
        
        .marker-label {
            background: #667eea;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
            white-space: nowrap;
        }
        
        .legend {
            position: absolute;
            bottom: 30px;
            left: 20px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            font-size: 13px;
            z-index: 999;
        }
        
        .legend-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }
        
        .legend-item {
            color: #666;
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    
    <div class="filter-panel">
        <h3>📍 筛选订单</h3>
        <div class="filter-group">
            <label>科目</label>
            <select id="subjectFilter">
                <option value="all">全部科目</option>
                <option value="数学">数学</option>
                <option value="英语">英语</option>
                <option value="物理">物理</option>
                <option value="化学">化学</option>
            </select>
        </div>
        <div class="filter-group">
            <label>年级</label>
            <select id="gradeFilter">
                <option value="all">全部年级</option>
                <option value="小学">小学</option>
                <option value="初中">初中</option>
                <option value="高中">高中</option>
            </select>
        </div>
    </div>
    
    <div class="legend">
        <div class="legend-title">使用说明</div>
        <div class="legend-item">🔵 圆圈显示该区域订单数量</div>
        <div class="legend-item">👆 点击圆圈查看订单详情</div>
        <div class="legend-item">🔍 可缩放地图查看更多</div>
    </div>
    
    <div class="info-panel" id="infoPanel">
        <div class="info-header">
            <h2 id="communityName">小区名称</h2>
            <p id="orderCount">订单数量</p>
            <button class="close-btn" onclick="closePanel()">×</button>
        </div>
        <div class="order-list" id="orderList"></div>
    </div>

    <script>
        // 模拟订单数据
        const orderData = [
            {
                community: "金地格林小城",
                location: [113.3245, 23.1291],
                orders: [
                    { subject: "数学", grade: "初二", time: "周末下午", salary: "150元/小时", desc: "需要辅导初二数学，基础较好，希望提高成绩", urgent: false },
                    { subject: "英语", grade: "初三", time: "周中晚上", salary: "130元/小时", desc: "中考冲刺，需要加强阅读和写作", urgent: true }
                ]
            },
            {
                community: "保利心语花园",
                location: [113.3189, 23.1345],
                orders: [
                    { subject: "物理", grade: "高一", time: "周末全天", salary: "180元/小时", desc: "刚上高中，物理基础薄弱", urgent: false }
                ]
            },
            {
                community: "万科城市花园",
                location: [113.3312, 23.1256],
                orders: [
                    { subject: "数学", grade: "小学五年级", time: "周三、周五", salary: "100元/小时", desc: "奥数辅导，有一定基础", urgent: false },
                    { subject: "英语", grade: "小学六年级", time: "周末上午", salary: "110元/小时", desc: "小升初准备，需要系统复习", urgent: false },
                    { subject: "化学", grade: "初三", time: "周末", salary: "140元/小时", desc: "中考化学冲刺", urgent: true }
                ]
            },
            {
                community: "碧桂园凤凰城",
                location: [113.3423, 23.1198],
                orders: [
                    { subject: "数学", grade: "高二", time: "周末", salary: "170元/小时", desc: "理科数学，需要提升解题能力", urgent: false },
                    { subject: "物理", grade: "高二", time: "周末", salary: "170元/小时", desc: "物理竞赛培训", urgent: false }
                ]
            },
            {
                community: "华润置地润府",
                location: [113.3156, 23.1412],
                orders: [
                    { subject: "英语", grade: "高一", time: "周中晚上", salary: "160元/小时", desc: "英语口语和听力提升", urgent: false }
                ]
            }
        ];

        let map;
        let markers = [];
        let currentFilter = { subject: 'all', grade: 'all' };

        // 初始化地图
        function initMap() {
            map = new AMap.Map('container', {
                zoom: 13,
                center: [113.3245, 23.1291],
                viewMode: '2D'
            });

            // 添加控件
            map.addControl(new AMap.Scale());
            map.addControl(new AMap.ToolBar());

            // 显示所有订单
            displayOrders(orderData);
        }

        // 过滤订单
        function filterOrders(data) {
            return data.map(item => {
                const filteredOrders = item.orders.filter(order => {
                    const subjectMatch = currentFilter.subject === 'all' || order.subject === currentFilter.subject;
                    const gradeMatch = currentFilter.grade === 'all' || order.grade.includes(currentFilter.grade);
                    return subjectMatch && gradeMatch;
                });
                
                return {
                    ...item,
                    orders: filteredOrders
                };
            }).filter(item => item.orders.length > 0);
        }

        // 显示订单标记
        function displayOrders(data) {
            // 清除旧标记
            markers.forEach(marker => marker.setMap(null));
            markers = [];

            // 过滤数据
            const filteredData = filterOrders(data);

            filteredData.forEach(item => {
                const marker = new AMap.Marker({
                    position: item.location,
                    content: `<div class="marker-label">${item.orders.length}</div>`,
                    offset: new AMap.Pixel(-20, -20)
                });

                marker.on('click', () => {
                    showOrderDetails(item);
                });

                marker.setMap(map);
                markers.push(marker);
            });
        }

        // 显示订单详情
        function showOrderDetails(data) {
            const panel = document.getElementById('infoPanel');
            const communityName = document.getElementById('communityName');
            const orderCount = document.getElementById('orderCount');
            const orderList = document.getElementById('orderList');

            communityName.textContent = data.community;
            orderCount.textContent = `共 ${data.orders.length} 个订单`;

            orderList.innerHTML = data.orders.map(order => `
                <div class="order-card">
                    <h3>${order.subject} - ${order.grade}</h3>
                    <div class="order-info">
                        <div>⏰ 时间：${order.time}</div>
                        <div>📝 需求：${order.desc}</div>
                        <div>
                            <span class="tag tag-subject">${order.subject}</span>
                            <span class="tag tag-grade">${order.grade}</span>
                            <span class="tag tag-salary">${order.salary}</span>
                            ${order.urgent ? '<span class="tag" style="background:#ffebee;color:#c62828;">🔥 急单</span>' : ''}
                        </div>
                    </div>
                </div>
            `).join('');

            panel.style.display = 'block';
        }

        // 关闭面板
        function closePanel() {
            document.getElementById('infoPanel').style.display = 'none';
        }

        // 筛选事件
        document.getElementById('subjectFilter').addEventListener('change', (e) => {
            currentFilter.subject = e.target.value;
            displayOrders(orderData);
        });

        document.getElementById('gradeFilter').addEventListener('change', (e) => {
            currentFilter.grade = e.target.value;
            displayOrders(orderData);
        });

        // 初始化
        initMap();
    </script>
</body>
</html>